/**
 * Created by liguangsong on 16/8/5.
 */
import React from 'react'
import { connect } from 'react-redux'
import { selectHome, selectVisitor } from '../../action/index.js'


var teamNameColor = {
    home: 'black',
    visitor: 'rgb(121, 133, 155)'
};

var teamBackColor = {
    home: 'white',
    visitor: 'rgb(230, 230, 230)'
};


var SelectView = React.createClass( {
    render() {
        const { background, color, left } = this.props;
        return (
            <div>
                <div className="HomeTeamSelect" style={{background: background.home}} onClick={this.clickHome}>
                    <p className="teamSelect" style={{color: color.home}}>MILWAUKEE BUCKS</p>
                </div>
                <div className="VisitorTeamSelect" style={{background: background.visitor}} onClick={this.clickVisitor}>
                    <p className="teamSelect" style={{color: color.visitor}}>INDINA PACERS</p>
                </div>
                <div className="selectLine" style={{left: left}}></div>
            </div>
        )
    },

    clickVisitor(event) {
        this.props.dispatch(selectVisitor());
    },

    clickHome(event) {
        this.props.dispatch(selectHome());
    }
});

function select(state) {
    return {
        background: state.selectTeam.background,
        color: state.selectTeam.color,
        left: state.selectTeam.left
    }
}

export default connect(select)(SelectView);